<script>
export default {
  data() {
    return {
      tableData: [],
      form: {},
      pojo: {},
      user:{},
      imageUrl:'',

    };
  },
  methods: {
    findPage(){
      this.form=this.user;
      this.axios.post('http://localhost:9000/a/user/findPage',this.form).then(response => {
        this.tableData.push(response.data.data);
        this.pojo=response.data.data;
        this.imageUrl=response.data.data.img;
       })
    },
    finduser(){
      var a=localStorage.getItem("user")
      this.user=JSON.parse(a)
      console.log(this.user)

    },
    change(){
      this.axios.post('http://localhost:9000/a/user/change',this.pojo).then(res=>{
        if (res.data.code === 200) {
          this.findPage()
          this.$message({
            type: 'ok',
            message: "更新成功"
          })
        } else {
          this.$message({
            type: 'fail',
            message: "更新失败"
          })
        }
      })
    },


    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.pojo.img=res
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }




  },
  created() {
    this.finduser();
    this.findPage();
  }
};
</script>
<template>
  <div align="left" class="c">
    <router-view/>
    <el-container style="display: flex; flex-direction: column;">
      <el-header><b style="font-size: 23px;">个人资料</b></el-header>
      <hr>
      <el-main>
        <el-row style="display: flex; flex-wrap: wrap;" >
          <el-form :model="pojo">
            <p style="font-size: 20px;">医生信息</p>
            <br>
            <p style="font-size: 15px;">医生编号      <span style="font-size: 20px;">{{pojo.id}}</span></p>
            <br>
            <el-form-item label="用户名" style="width: 30%;">
              <el-input v-model="pojo.username" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="头像">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:9000/a/user/fileUpload"
                  name="file"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img width="50px" v-if="imageUrl" :src="imageUrl" class="avatar" style="border-radius: 50%; width: 50px; height: 50px; width: 50px;">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="医生姓名">
              <el-input v-model="pojo.name" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="医生角色" v-if="user.role==0">
              <el-select v-model="pojo.role" placeholder="请选择医生角色">
                <el-option label="系统管理员" :value="0"></el-option>
                <el-option label="全科医师" :value="1"></el-option>
                <el-option label="全科护士" :value="2"></el-option>
                <el-option label="护理医师" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="性别">
             <el-select v-model="pojo.sex" placeholder="请选择性别">
               <el-option label="男" :value="0"></el-option>
               <el-option label="女" :value="1"></el-option>
             </el-select>
            </el-form-item>
            <el-form-item label="医生简介">
              <el-input type="textarea" v-model="pojo.intro" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="医生擅长">
              <el-input type="textarea" v-model="pojo.speciality" style="width: 300px" ></el-input>
            </el-form-item>
          </el-form>

        </el-row>

      </el-main>
      <hr>
      <br>
      <el-button type="primary" style="width: 100px" @click="change()">保 存</el-button>
    </el-container>
  </div>
</template>

<style>
.c {
  background-color: #F2F7FB;
  border: 1px solid #d3dce6;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
  width: 100%;
  height: 90%;
  overflow: auto;
}

html {
  font-size: 16px;
}
h1 {
  font-size: 2rem;
}


</style>

